<template>
    <el-skeleton animated :rows="14" :loading="gjloading">
    <diV>
        <el-page-header @back="goBack" content="新增权限">
        </el-page-header>
    </diV>
    <div style="margin-top: 20px;">
        <el-descriptions border title="权限新增" :column="3" direction="vertical">
            <el-descriptions-item label="名称">
                <el-input placeholder="在此输入权限名称" v-model="name"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="地址">
                <el-input placeholder="输入权限地址" v-model="address"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="图标">
                <el-input placeholder="输入图标代码" v-model="icon"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="序号">
                <el-input-number :min="1" v-model="num" size="large" />
            </el-descriptions-item>
            <el-descriptions-item label="菜单(该权限是否会出现在左侧菜单栏)">
                <el-switch active-text="是" inactive-text="否" v-model="menu"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
            </el-descriptions-item>
            <el-descriptions-item label="公开(公开则代表所有人会获得该权限)">
                <el-switch active-text="是" inactive-text="否" v-model="gk"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
            </el-descriptions-item>
            <el-descriptions-item label="上级权限(不选则代表为顶级权限)">
                <el-tag v-if="Route.query.id!=undefined">
                    {{obj.name}}
                </el-tag>
                <div v-else class="block">
                <el-cascader :options="options" :props="props" ref="cascaderHandle" @change="change" clearable />
            </div>
            </el-descriptions-item>
            <el-descriptions-item label="描述" :span="2">
                <el-input type="textarea" placeholder="补充说明" v-model="explain"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="操作">
                <el-button type="primary" @click="xz">新增</el-button>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</el-skeleton>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { addRight, getRights } from '../../api/Right/index'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        const data = reactive({
            name: '',
            address: '',
            icon: '',
            num: 1,
            menu: true,
            gk: false,
            options: [] as any,
            explain: '',
            props: {
                multiple: true,
                checkStrictly: true
            },
            obj: [] as any,
            ids: [],
            gjloading:true
        })

        const Route = useRoute();

        const events = {
            goBack() {
                router.push('/right')
            },
            //上级权限数据
            getdata() {
                var obj = {
                    page: 1,
                    limit: 999
                }
                getRights(
                    obj
                ).then((res: any) => {
                    console.log('--------//', res.data.data)
                    if (res.result == 0) {
                        if (Route.query.id != undefined) {
                            data.obj = res.data.data.find((d: any) => d.id==Route.query.id)
                            console.log("////////////===", data.obj)
                        } else {
                            data.obj = [];
                            var max = 0;
                            res.data.data.forEach((item: any) => {
                                if (item.no > max) {
                                    max = item.no
                                }
                            })
                            data.num = max + 1;
                            //获取数据
                            res.data.data.forEach((item: any) => {
                                if (item.children.length == 0) {
                                    data.options.push({
                                        value: item.id,
                                        label: item.name,
                                        children: []
                                    })
                                } else if (item.children.length > 0) {
                                    let children: any = [];
                                    item.children.forEach((item2: any) => {
                                        children.push({
                                            value: item2.id,
                                            label: item2.name,
                                        })
                                    })
                                    data.options.push({
                                        value: item.id,
                                        label: item.name,
                                        children: children
                                    })
                                }


                            });

                        }
                        data.gjloading=false
                    }
                })
            },
            //新增
            xz() {
                if (Route.query.id != undefined) {
                    var parentID = "";
                    parentID = data.obj.id;
                    console.log('----====----', parentID)
                } else {
                    parentID = data.ids[data.ids.length - 1]
                }
                var obj = {
                    explain: data.explain,
                    icon: data.icon,
                    isMenu: data.menu == true ? 1 : 0,
                    isPublic: data.gk == true ? 1 : 0,
                    name: data.name,
                    no: data.num,
                    parentID: parentID,
                    url: data.address
                }
                console.log("获obj的值", obj)
                console.log("ids", data.ids)
                addRight(
                    obj
                )
                .then((res: any) => {
                    if (res.result === 0) {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        router.push("/right")
                    } else {
                        ElMessage({
                            message: '添加失败',
                            type: 'error',
                        })
                    }
                })
            },
            //上级权限选中
            change(val: any) {
                data.ids = [];
                data.ids = val;
                console.log("val", val)
                console.log("menu", data.menu)
                console.log("gk", data.gk)
            }
        }

        onMounted(() => {
            events.getdata();
            console.log('=============',Route.query.id)
        })

        return {
            ...toRefs(data),
            ...events,
            Route
        }
    },
})
</script>
